<template>
  <div class="app-container">
    <el-tabs v-model="activeTab">
      <!-- 新增：租户账单tab -->
      <el-tab-pane label="租户账单" name="tenantBill">
        <el-form :inline="true" :model="tenantBillQuery" class="query-form" @submit.prevent>
          <el-form-item label="年月">
            <el-date-picker
              v-model="tenantBillQuery.month"
              type="month"
              value-format="YYYY-MM"
              placeholder="请选择年月"
              style="width: 120px"
            />
            
          </el-form-item>
          <el-form-item label="租户名称">
            <el-input
              v-model="tenantBillQuery.qymc"
              placeholder="请输入租户名称"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTenantBillList">查询</el-button>
            <el-button @click="resetTenantBillQuery">重置</el-button>
        <el-button type="warning" @click="exportBillList">导出</el-button>
        
          </el-form-item>
        </el-form>
        <el-table :data="tenantBillList" style="margin-top: 10px">
          <el-table-column prop="zt" label="载体" align="center" width="150" show-overflow-tooltip />
         
         <el-table-column
            prop="qymc"
            label="企业名称"
            align="center"
            width="200"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="handleShowBill(scope.row)"
              >
                {{ scope.row.qymc }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="nf" label="年份" align="center" width="100">
            <template #default="scope">
              <span>{{ scope.row.nf }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="yf" label="月份" align="center" width="100">
            <template #default="scope">
              <span>{{ scope.row.yf }}</span>
            </template>
          </el-table-column>  <el-table-column prop="dbjs" label="电表电量" align="center" width="120" />
          <el-table-column prop="dbdf" label="电表电费" align="center" width="120" />
          <!-- <el-table-column prop="checkjs" label="容量电量" align="center" width="120" /> -->
          <el-table-column prop="checkdf" label="容量电费" align="center" width="120" />
          <!-- <el-table-column prop="totaljs" label="总电量" align="center"   /> -->
          <el-table-column prop="totaldf" label="总电费" align="center"   />
        </el-table>
      </el-tab-pane>
      <!-- 原有账单状态tab -->
      <el-tab-pane label="账单状态" name="bill">
        <el-form :inline="true" :model="billQuery" class="query-form" @submit.prevent>
          <el-form-item label="年月">
            <el-date-picker
              v-model="billQuery.month"
              type="month"
              value-format="YYYY-MM"
              placeholder="请选择年月"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item label="费用类型">
            <el-input
              v-model="billQuery.khlx"
              placeholder="请输入费用类型"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item label="租户名">
            <el-input
              v-model="billQuery.qymc"
              placeholder="请输入租户名"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getBillList">查询</el-button>
            <el-button @click="resetBillQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="billList" style="margin-top: 10px">
          <el-table-column
            fixed
            prop="zt"
            label="载体"
            align="center"
            width="150"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span>{{ scope.row.zt }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="qymc"
            label="企业名称"
            align="center"
            width="200"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span
             
              >
                {{ scope.row.qymc }}
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="dbyt" label="电表用途" align="center" width="120">
            <template #default="scope">
              <span>{{ scope.row.dbyt || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="nf" label="年份" align="center" width="100">
            <template #default="scope">
              <span>{{ scope.row.nf }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="yf" label="月份" align="center" width="100">
            <template #default="scope">
              <span>{{ scope.row.yf }}</span>
            </template>
          </el-table-column>
<!-- 
          <el-table-column prop="dbdf" label="当月电表电费" align="center" width="130">
            <template #default="scope">
              <span>{{ scope.row.dbdf || 0 }}</span>
            </template> -->
          <!-- </el-table-column> -->
           <el-table-column prop="hklx" label="费用类型" align="center" width="120">
            <template #default="scope">
              <span>{{ scope.row.hklx || 0 }}</span>
            </template>
          </el-table-column>
           <el-table-column prop="dbjs" label="当月电量" align="center" width="130">
            <template #default="scope">
              <span>{{ scope.row.dbjs || 0 }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="checkdf" label="容量电费" align="center" width="120">
            <template #default="scope">
              <span>{{ scope.row.checkdf || 0 }}</span>
            </template>
          </el-table-column> -->
         
          <el-table-column prop="hkje" label="当月应交电费" align="center" width="140">
            <template #default="scope">
              <span>{{ scope.row.hkje || 0 }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="ysje" label="已收电费" align="center" width="120">
            <template #default="scope">
              <span>{{ scope.row.ysje || 0 }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="wsje" label="未收电费" align="center" width="120">
            <template #default="scope">
              <span>{{ scope.row.wsje || 0 }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="hkzt" label="回款状态" align="center" width="130">
            <template #default="scope">
              <span
                :style="{
                  color:
                    scope.row.hkzt === '已收款'
                      ? '#67C23A'
                      : scope.row.hkzt === '未收款'
                      ? '#F56C6C'
                      : '#E6A23C',
                }"
              >
                {{ scope.row.hkzt || "未收款" }}
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="hkrq" label="应收款日期" align="center" width="140">
            <template #default="scope">
              <span>{{ scope.row.hkrq || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="hkks" label="开始日期" align="center" width="140">
            <template #default="scope">
              <span>{{ scope.row.hkks || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="hkjs" label="结束日期" align="center" width="140">
            <template #default="scope">
              <span>{{ scope.row.hkjs || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="sjrq" label="实际收款日期" align="center" width="140">
            <template #default="scope">
              <span>{{ scope.row.sjrq || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="hkbz" label="收款备注" align="center" width="150">
            <template #default="scope">
              <span>{{ scope.row.hkbz || "--" }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="操作" align="center" width="80">
            <template #default="scope">
              <el-tooltip content="下载账单">
                <el-button
                  link
                  icon="el-icon-download"
                  @click="downloadBill(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column> -->
        </el-table>
        <pagination
          v-show="billTotal > 0"
          :total="billTotal"
          v-model:page="billQuery.pageNum"
          v-model:limit="billQuery.pageSize"
          @pagination="getBillList"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 电费单据抽屉 -->
    <el-drawer
      v-model="billDrawerVisible"
      title="电费单据"
      size="60%"
      direction="rtl"
      :with-header="false"
    >
      <div style="padding: 24px">
        <div
          style="
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 32px;
          "
        >
          {{ billDetail.qymc ? billDetail.qymc + billQuery.month + "月电费单据" : "" }}
        </div>
        <!-- 标题与右上信息 -->
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
          "
        >
          <div style="margin-bottom: 16px"></div>
          <div style="text-align: left; color: #606266">
            <div>租户名称：{{ billDetail.qymc }}</div>
            <div>租赁单元：{{ billDetail.fjh }}</div>
            <div>项目地址：{{ billDetail.zt }}</div>
            <div>
             收费周期：{{ zq }}
            </div>
          </div>
        </div>
        <!-- 电表明细表格 -->
        <el-table :data="detailAmmeter || []" border>
          <el-table-column prop="dbbh" label="电表编号" align="center" width="180" />
          <el-table-column prop="dbb" label="本月抄见(B)" align="center" />
          <el-table-column prop="dba" label="上月抄见(C)" align="center" />
          <el-table-column prop="dbbl" label="倍率(D)" align="center" />
          <el-table-column
            label="实用电量(E)=(B-C)*D"
            align="center"
            width="180"
            prop="dbjs"
          />
          <el-table-column prop="dfdj" label="综合单价" align="center" />
          <el-table-column prop="dbdf" label="本月电费(RMB)" align="center" />
        </el-table>
        <!-- 费用小计 -->
        <el-table :data="feeRows" border :show-header="false" style="margin-bottom: 8px">
          <el-table-column prop="label" width="180" />
          <el-table-column prop="value" align="right" />
        </el-table>
        <!-- 左下角收款信息 -->
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 24px;
            color: #606266;
          "
        >
          <div>
            <div>收款人：{{ billDetail.skr }}</div>
            <div>开户行：{{ billDetail.khh }}</div>
            <div>人民币收款账号：{{ billDetail.rmbzh }}</div>
          </div>
          <div></div>
        </div>
      </div>

      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 24px;
          color: #606266;
        "
      >
        <el-button type="primary" @click="downloadBillPdf">下载账单</el-button>
      </div>
      <div class="bill-container">
        <!-- 标题部分 -->
        <div class="title-section">
          <h1 class="bill-title">{{ billQuery.month + " 月电费单据" }}</h1>
        </div>

        <!-- 客户信息及收款信息 -->
        <div class="info-section">
          <div class="company-info">
            <p>
              {{
                billDetail.qymc
              }}：您好，以下是贵公司本期账单明细，请于{{ String(new Date(billQuery.month).getMonth() + 2).padStart(2, "0")==13||String(new Date(billQuery.month).getMonth() + 2).padStart(2, "0")=='13'?'01':String(new Date(billQuery.month).getMonth() + 2).padStart(2, "0") }}月15日之前将本月应付账款汇至我公司账号，感谢您的支持与配合。
            </p>
          </div>

          <div class="payment-info">
            <h3>收款信息</h3>
            <ul>
              <li>公司名称：{{ billDetail.skr }}</li>
              <li>开户银行：{{ billDetail.khh }}</li>
              <li>收款账户：{{ billDetail.rmbzh }}</li>
            </ul>
          </div>

          <div class="rental-info">
            <p>
              <strong>租赁位置：{{billDetail.fjh}}</strong>
            </p>
            <p>
              账单日期： {{ zq }} 
              <!-- 账单日期： 2025.06.01~2025.06.30 -->
            </p>
            <p class="note">
              备注：如余额不足，请及时充值；如电费单据和发票有差异，请以发票为准。
            </p>
          </div>
        </div>

        <!-- 收款项目表格 -->
        <div class="table-section">
          <table class="bill-table">
            <thead>
              <tr>
                <th>收款项目</th>
                <th>金额（元）</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>电费（代收）</td>
                <td>¥{{ db_rl.totaldf}}</td>
              </tr>
            </tbody>
          </table>

          <!-- 电表数据表格 -->
          <table class="meter-table">
            <thead>
              <tr>
                <th>电表编号</th>
                <th>倍率(D)</th>
                <th>上月抄见(C)</th>
                <th>本月抄见(B)</th>
                <th>实用电量(E)=(B-C)*D</th>
                <th>单价</th>
                <th>本月电费(RMB)</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in detailAmmeter" :key="index">
                <td>{{ item.dbbh }}</td>
                <td>{{ item.dbbl }}</td>
                <td>{{ item.dba }}</td>
                <td>{{ item.dbb }}</td>
                <td>{{ item.dbjs }}</td>
                <td>{{ item.dfdj }}</td>
                <td>{{ item.dbdf }}</td>
              </tr>
            </tbody>
             
            <tfoot>
              <tr>
                <td colspan="6" class="total">合计</td>
                <td>
                  本月应付款¥{{ db_rl.totaldf }} 大写：{{
                    digitUppercase(db_rl.totaldf)
                  }}
                </td>
              </tr>
            </tfoot>
             <tfoot>
              <tr>
                <td colspan="6" class="total">容量电费</td>
                <td>
                  {{
                  db_rl.rldf
                  }}
                </td>
              </tr>
            </tfoot>
          </table>
        </div>

        <!-- 底部声明 -->
        <div class="disclaimer">
          青澜只提供水电费代收服务，执行产权方及国家能源机构收费标准，不参与能源费用的定价。
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { selectElectricity, checkLinkage, selectElectricityBill } from "@/api/bill/index";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import { parseTime } from "@/utils/ruoyi";
const activeTab = ref("tenantBill");
const { proxy } = getCurrentInstance();

// 账单状态查询
const billQuery = reactive({
  month: getLastMonthStr(), // 默认上个月
  khlx: "", // 新增费用类型
  qymc: "",
  pageNum: 1,
  pageSize: 10,
});
const billList = ref([]);
const billTotal = ref(0);

// 租户账单查询
const tenantBillQuery = reactive({
  month: getLastMonthStr(),
  qymc: "",
});
const tenantBillList = ref([]);

// 容量联状态查询
const checkQuery = reactive({
  month: getLastMonthStr(), // 默认上个月
  title: "",
  pageNum: 1,
  pageSize: 10,
});

const checkList = ref([]);
const checkTotal = ref(0);

// 抽屉控制
const billDrawerVisible = ref(false);
const billDetail = ref({});
const feeRows = ref([]);

// 获取上个月字符串，自动处理跨年
function getLastMonthStr() {
  const d = new Date();
  d.setDate(1); // 设置为当月第一天
  d.setMonth(d.getMonth() - 1);

  console.log(parseTime(d, "{y}-{m}"),parseTime(d),d.getMonth());
  return parseTime(d, "{y}-{m}");
}

// 查询账单状态
function getBillList() {
  selectElectricity({ ...billQuery }).then((res) => {
    const list = res.data?.list || [];

    // 格式化日期字段
    const formattedList = list.map((item) => ({
      ...item,
      hkrq: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
      hkks: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
      hkjs: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
    }));

    billList.value = formattedList;
    billTotal.value = res.data?.total || 0;
  });
}

// 查询租户账单
async function getTenantBillList() {
  // 拉取全部数据
  const res = await selectElectricity({
    month: tenantBillQuery.month,
    qymc: tenantBillQuery.qymc,
    pageNum: 1,
    pageSize: 9999,
  });
  const list = res.data?.list || [];
  // 合并同一khbh
  const map = new Map();
  list.forEach(item => {
    const key = item.khbh;
    if (!map.has(key)) {
      map.set(key, {
        khbh: item.khbh,
        qymc: item.qymc,
        zt: item.zt,
        nf: item.nf,
        yf: item.yf,
        

        dbjs: 0,      // 电表电量
        dbdf: 0,      // 电表电费
        checkjs: 0,   // 容量电量
        checkdf: 0,   // 容量电费
        totaljs: 0,   // 总电量
        totaldf: 0,   // 总电费
      });
    }
    const row = map.get(key);
    if (item.hklx === "电表电费" || item.hklx === 1) {
      row.dbjs += Number(item.dbjs) || 0;
      row.dbdf += Number(item.hkje) || 0;
    } else if (item.hklx === "容量费" || item.hklx === 2) {
      row.checkjs += Number(item.dbjs) || 0;
      row.checkdf += Number(item.hkje) || 0;
    }
    row.totaljs += Number(item.dbjs) || 0;
    row.totaldf += Number(item.hkje) || 0;
  });
  tenantBillList.value = Array.from(map.values());
}


// 查询容量联状态
function getCheckList() {
  checkLinkage({ ...checkQuery }).then((res) => {
    checkList.value = res.data?.list || [];
    checkTotal.value = res.data?.total || 0;
  });
}

// 重置账单查询
function resetBillQuery() {
  billQuery.month = getLastMonthStr(); // 重置为上个月
  billQuery.khlx = ""; // 新增费用类型
  billQuery.qymc = "";
  billQuery.pageNum = 1;
  billQuery.pageSize = 10;
  getBillList();
}

// 重置租户账单查询
function resetTenantBillQuery() {
  tenantBillQuery.month = getLastMonthStr();
  tenantBillQuery.qymc = "";
  getTenantBillList();
}

// 重置容量联查询
function resetCheckQuery() {
  checkQuery.month = getLastMonthStr(); // 重置为上个月
  checkQuery.title = "";
  checkQuery.pageNum = 1;
  checkQuery.pageSize = 10;
  getCheckList();
}

// 下载账单
function downloadBill(row) {
  // 实际下载逻辑根据后端接口实现
  window.open(row.downloadUrl, "_blank");
}

// 下载容量联
function downloadCheck(row) {
  // 实际下载逻辑根据后端接口实现
  window.open(row.downloadUrl, "_blank");
}

// 获取月份最后一天
function getMonthEnd(month) {
  const date = new Date(month + "-01");
  date.setMonth(date.getMonth() + 1);
  date.setDate(0);
  return date.getDate();
}
const detailAmmeter = ref([]);
const zq=ref("");
const db_rl=ref({});
// 点击租户名弹出账单详情
async function handleShowBill(row) {
  const params = {
    khbh: row.khbh,
    month: billQuery.month,
  };
  const res = await selectElectricityBill(params);
  if (res.code === 200 && res) {
    let detail = res["租户信息"] || {};
    let ztDetail = res["载体信息"] || {};
    detailAmmeter.value = res["电表账单"] || {};
    let detail_rl = res["租户容量费"] || {};
    console.log('detail_rl', detail_rl)
    let detail_db = res["租户电费账单"] || {};
    console.log('detail_db', detail_db)
    db_rl.value={dbjs:detail_db.dbjs || 0, dbdf:detail_db.hkje || 0,rldf:detail_rl.hkje || 0,rljs:detail_rl.dbjs || 0,totaldf:(detail_db.hkje || 0) + (detail_rl.hkje || 0)};
    console.log('db_rl', db_rl)
    feeRows.value =
      ztDetail.dflx == 2
        ? [
          { label: "电表电量", value: detail_db.dbjs || 0 },
            // { label: "容量电量", value: detail_rl.dbjs || 0 },
            { label: "电表电费(RMB)", value: detail_db.hkje || 0 },
            { label: "容量电费(RMB)", value: detail_rl.hkje || 0 },
            { label: "合计(RMB)", value: (detail_db.hkje || 0) + (detail_rl.hkje || 0) },
          ]
        : ztDetail.dflx == 1
        ? [
            { label: "电表电费(RMB)", value: detail_db.khje || 0 },
            { label: "合计(RMB)", value: detail_db.hkje || 0 },
          ]
        : [];
        zq.value = parseTime(detail_db.hkks, "{y}-{m}-{d}")+'~'+parseTime(detail_db.hkjs, "{y}-{m}-{d}");
    billDetail.value = { ...detail, ...ztDetail };
    console.log("账单详情", detailAmmeter.value);
    billDrawerVisible.value = true;
  }
}
// 下载账单PDF
function downloadBillPdf() {
  const drawer = document.querySelector(".bill-container");
  html2canvas(drawer, { scale: 2 }).then((canvas) => {
    const imgData = canvas.toDataURL("image/png");
    const pdf = new jsPDF("p", "mm", "a4");
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();
    const imgWidth = pageWidth - 20;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    pdf.addImage(imgData, "PNG", 10, 10, imgWidth, imgHeight);
    pdf.save("电费单据.pdf");
  });
}
// 数字金额转中文大写
function digitUppercase(n) {
  if (!n) return "零元整";
  const fraction = ["角", "分"];
  const digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
  const unit = [
    ["元", "万", "亿"],
    ["", "拾", "佰", "仟"],
  ];
  let head = n < 0 ? "负" : "";
  n = Math.abs(n);

  let s = "";

  for (let i = 0; i < fraction.length; i++) {
    s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(
      /零./,
      ""
    );
  }
  s = s || "整";
  n = Math.floor(n);

  for (let i = 0; i < unit[0].length && n > 0; i++) {
    let p = "";
    for (let j = 0; j < unit[1].length && n > 0; j++) {
      p = digit[n % 10] + unit[1][j] + p;
      n = Math.floor(n / 10);
    }
    s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
  }
  return (
    head +
    s
      .replace(/(零.)*零元/, "元")
      .replace(/(零.)+/g, "零")
      .replace(/^整$/, "零元整")
  );
}
// 在<script setup>中添加
import { saveAs } from "file-saver";
import * as XLSX from "xlsx";

// 导出账单列表为Excel
async function exportBillList() {
  // 拉取全部数据
  const params = {
    ...billQuery,
    pageNum: 1,
    pageSize: billTotal.value || 1000,
  };
  const res = await selectElectricity(params);
  const list = res.data?.list || [];
  if (!list.length) {
    proxy.$modal.msgWarning("暂无可导出的数据");
    return;
  }
  // 格式化数据
  const exportData = list.map(item => ({
    载体: item.zt,
    企业名称: item.qymc,
    电表用途: item.dbyt || "--",
    年份: item.nf,
    月份: item.yf,
    费用类型:item.hklx,
    当月应交电费: item.hkje || 0,
    已收电费: item.ysje || 0,
    未收电费: item.wsje || 0,
    回款状态: item.hkzt || "未收款",
    应收款日期: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
    开始日期: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
    结束日期: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
    实际收款日期: item.sjrq ? parseTime(item.sjrq, "{y}-{m}-{d}") : "--",
    收款备注: item.hkbz || "--",
  }));

  // 生成sheet和workbook
  const ws = XLSX.utils.json_to_sheet(exportData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "账单列表");

  // 写入并下载
  const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" });
  saveAs(new Blob([wbout], { type: "application/octet-stream" }), `账单列表_${billQuery.month}.xlsx`);
}
// 初始化
getBillList();
// getCheckList();
onMounted(() => {
  getTenantBillList();
});
</script>

<style scoped>
.query-form {
  margin-bottom: 10px;
}
.bill-container {
  font-family: Arial, sans-serif;
  border: 0.5px solid #333;
  position: absolute;
  bottom: 100%;
}
.title-section {
  text-align: center;
  margin-bottom: 20px;
  border-top: 0.5px solid #333;
  border-bottom: 1px solid #333;
}
.bill-title {
  font-size: 24px;
  color: #333;
}
.info-section {
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.payment-info,
.rental-info {
  margin-top: 15px;
}
.payment-info ul {
  list-style: none;
  padding: 0;
}
.payment-info li {
  margin-bottom: 5px;
}
.note {
  font-size: 12px;
  color: #666;
}
.table-section {
  background-color: #fff;
  border-top: 0.5px solid #333;
  border-bottom: 0.5px solid #333;
}
.bill-table,
.meter-table {
  border-top: 0.5px solid #333;
  border-bottom: 0.5px solid #333;
  width: 100%;
  border-collapse: collapse;
}
.bill-table th,
.bill-table td,
.meter-table th,
.meter-table td {
  padding: 10px;
  text-align: left;
}
.total {
  font-weight: bold;
}
.textual {
  font-size: 14px;
  color: #666;
}
.disclaimer {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .bill-table th,
  .bill-table td {
    padding: 5px;
    font-size: 14px;
  }
  .meter-table th,
  .meter-table td {
    padding: 5px;
    font-size: 12px;
  }
}
</style>
